<template>
  <el-dialog :title="title" :visible.sync="open" width="40%" append-to-body>
    <div class="content_form">
      <el-form ref="ruleForm" :model="dataForm" :rules="dataRules" label-width="100px">
        <el-form-item label="分类名称" prop="productCategoryName">
          <el-input v-model="dataForm.productCategoryName" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
          <el-input v-model="dataForm.orderNum" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-radio-group v-model="dataForm.isShow">
            <el-radio
              v-for="dict in dict.type.is_show"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传图片" prop="imageUrl">
          <ImageUpload :value="dataForm.imageUrl ? imgUrl + dataForm.imageUrl : dataForm.imageUrl" :uploadImgUrlType="'category'" @input="inputEventListener" />
        </el-form-item>
        <el-form-item label="产品参数">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group v-model="checkedProductMenu" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="item in productMenu" :label="item.detailsMenuId" :key="item.detailsMenuId">{{item.detailsMenuName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea" :rows="4" placeholder="请输入简介" v-model="dataForm.productCategoryInfo"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addCategory, getCategory, updateCategory, productMenuSelectList } from "@/api/product";

export default {
  name: "classificationAdd",
  dicts: ['is_show'],
  data () {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      dataForm: {
        productCategoryName: '',
        orderNum: '',
        imageUrl: '',
        isShow: '0',
        productCategoryInfo: '',
        productCategoryId: undefined,
        menuCategoryList: []
      },
      // 表单校验
      dataRules: {
        productCategoryName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
        ],
        orderNum: [
          { required: true, message: '请输入排序', trigger: 'blur' },
        ],
        imageUrl: [
          { required: true, message: '请上传品牌logo', trigger: 'change' },
        ]
      },
      checkAll: false,
      checkedProductMenu: [],
      productMenu: [],
      isIndeterminate: true
    }
  },
  methods: {
    init (e) {
      this.reset();
      this.open = true;
      this.title = e ? "编辑分类" : "添加分类";
      this.dataForm.productCategoryId = e || undefined
      this.productMenuSelectListReq()
      if (e) return this.handleUpdate(e)
    },
    handleCheckAllChange (val) {
      var checkedsItem = val ? this.productMenu : []
      if (checkedsItem.length > 0) {
        this.checkedProductMenu = checkedsItem.map(el => el.detailsMenuId)
      } else {
        this.checkedProductMenu = []
      }
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.productMenu.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.productMenu.length;
    },
    productMenuSelectListReq () {
      productMenuSelectList().then(res => {
        // console.log('返回的数据', res)
        this.productMenu = res
      })
    },
    // 表单重置
    reset () {
      for (var key in this.dataForm) {
        if (Array.isArray(this.dataForm[key])) {
          this.dataForm[key] = []
        } else {
          this.dataForm[key] = ''
        }
      }
      this.dataForm.isShow = '0'
      this.checkedProductMenu = []
      this.resetForm("ruleForm");
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      getCategory(row).then(res => {
        const { code, data, msg } = res
        if (code != 200) return this.$modal.msgError(msg);
        this.dataForm = { ...data }
        this.dataForm.isShow = data.isShow + ''
        this.checkedProductMenu = data.menuCategoryList.map(el => el.detailsMenuId)
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          // 产品类型赋值
          this.dataForm.menuCategoryList = []
          this.checkedProductMenu.forEach(element => {
            this.dataForm.menuCategoryList.push({ detailsMenuId: element })
          })
          const api = this.dataForm.productCategoryId ? updateCategory(this.dataForm) : addCategory(this.dataForm)
          api.then(res => {
            const { code, msg } = res
            if (code !== 200) return this.$modal.msgError(msg);
            this.dataForm.productCategoryId ? this.$modal.msgSuccess("修改成功") : this.$modal.msgSuccess("添加成功")
            this.open = false;
            this.$emit('eventUpdata')
          })
        }
      });
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    inputEventListener(event) {
      this.dataForm.imageUrl = event
    }
  }
}
</script>
<style>
</style>
